<template>
    <div class="b">
    <div class="big">
        <ul>
            <li v-for="(v,i) in arr" :key="i">
                <div class="top">
                    <span class="l">{{v.top}}</span>
                    <span class="r">{{v.data}}</span>
                </div>
                <div class="foot">
                    <div class="left">
                        <span class="l1">{{v.hader}}</span>
                        <span class="r1">{{v.content}}</span>
                    </div>
                    <div class="right">
                        <img :src="v.img" alt="">
                    </div>
                </div>
            </li>
        </ul>
        
        
    </div>
    </div>
</template>

<script>
import getLink from "@/api/getindex.js"
export default {
data(){
    return{
        arr:[]
    }
},
    created(){
    getLink("/mock/data/news").then(res => {
    this.arr =res.data;
    })
}
}

</script>

<style scoped>
img{
    width: 30%;
    margin-left: 65%;
}
    .l1{
        font-size: 0.3rem;
    }
    .r1{
        font-size: 0.25rem;
        color: rgb(148, 141, 141);
        padding-top: 0.2rem;
    }
    .left{
        display: flex;
        flex-direction: column;
        width: 70%;
        
    }
    .foot{
        display: flex;
        justify-content: space-between;
        margin: 3% 0;
        padding: 3% 0;
        

    }
    .top{
        display: flex;
        justify-content: space-between;
    }
    .l{
        font-size: 0.25rem;
    }
    .r{
        font-size: 0.2rem;
        color: rgb(148, 141, 141);
    }
    ul{
        list-style: none;
         background-color: #F0F0F0;
    }
    li{
        margin: 0 2%;
        padding-top: 2%;
        background-color: white;
    }
    .big{
        /* width: 100%; */
       background-color: #F0F0F0;
       margin: 0.1rem;
    }
    .b{
        /* width: 100%; */
       padding: 0.05rem;
        background-color: #F0F0F0;
    }
</style>
